
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
    <link href="${request.contextPath}/statics/css/hipay.css" rel="stylesheet" type="text/css">
    <link href="${request.contextPath}/statics/css/style.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: #c14443;
            overflow: hidden;
        }
    </style>
    <style>
        .demo {
            margin: 1em 0;
            padding: 1em 1em 2em;
            background: #fff;
        }

        .demo h1 {
            padding-left: 8px;
            font-size: 24px;
            line-height: 1.2;
            border-left: 3px solid #108EE9;
        }

        .demo h1,
        .demo p {
            margin: 1em 0;
        }

        .demo .am-button + .am-button,
        .demo .btn + .btn,
        .demo .btn:first-child {
            margin-top: 10px;
        }

        .fn-hide {
            display: none !important;
        }

        input {
            display: block;
            padding: 4px 10px;
            margin: 10px 0;
            line-height: 28px;
            width: 100%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="aui-free-head">
    <div class="aui-flex b-line">
        <div class="aui-user-img">
            <img src="${request.contextPath}/statics/image/tx.jpeg" alt="">
        </div>

        <div class="aui-flex-box">
            <h5>Ai充值机器人</h5>
            <p>唤起支付直接付款</p>
            <p id="xxxx">付款成功后将自动充值到账</p>
        </div>
    </div>
    <div id="xxx" class="aui-flex aui-flex-text">
        <div class="aui-flex-box">
            <h2>充值金额</h2>
            <h3>${amount}</h3>
            <p>充单号：${orderid}</p>
        </div>
    </div>

    <a class="aui-button">

        <button class="worn" id="btn">支付授权中,<span class="second green">15</span>&nbsp;秒后支付</button>
    </a>
</div>
<div class="am-process">
    <div class="am-process-item pay"> <i class="am-icon process pay" aria-hidden="true"></i>
        <div class="am-process-content">
            <div class="am-process-main"> ①如果授权失败</div>
            <div class="am-process-brief"> 返回上一层，截屏保存二维码</div>
        </div>
        <div class="am-process-down-border"></div>
    </div>
    <div class="am-process-item pay"> <i class="am-icon process success" aria-hidden="true"></i>
        <div class="am-process-content">
            <div class="am-process-main">②打开支付宝扫一扫</div>
            <div class="am-process-brief"> 选择二维码扫一扫支付</div>
        </div>
        <div class="am-process-up-border"></div>
        <div class="am-process-down-border"></div>
    </div>
    <div class="am-process-item success"> <i class="am-icon process success" aria-hidden="true"></i>
        <div class="am-process-content">
            <div class="am-process-main">③支付成功</div>
        </div>
        <div class="am-process-up-border"></div>
    </div>
    <footer class="am-footer am-fixed am-fixed-bottom">
        <div class="am-footer-interlink am-footer-top"> <a class="am-footer-link" href="javascript:javascrip()">刷新页面</a>
        </div>
        <div class="am-footer-copyright">Copyright © 2008-2016 AliPay</div>
    </footer>
</div>

<script>
    //修改top ios访问顶上去
    var u = navigator.userAgent, app = navigator.appVersion;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
    if (!isAndroid) {
        var aa= document.getElementById('auihead');
        aa.style.marginTop = '65px';
    }
    //导航栏颜色
    AlipayJSBridge.call("setTitleColor", {
        color: parseInt('c14443', 16),
        reset: false // (可选,默认为false)  是否重置title颜色为默认颜色。
    });
    //导航栏loadin
    AlipayJSBridge.call('showTitleLoading');
    //副标题文字
    AlipayJSBridge.call('setTitle', {
        title: '自助充值',
        subtitle: '安全支付'
    });
    //右上角菜单
    AlipayJSBridge.call('setOptionMenu', {
        icontype: 'filter',
        redDot: '01', // -1表示不显示，0表示显示红点，1-99表示在红点上显示的数字
    });
    AlipayJSBridge.call('showOptionMenu');
    document.addEventListener('optionMenu', function(e) {
        AlipayJSBridge.call('showPopMenu', {
            menus: [{
                name: "查看帮助",
                tag: "tag1",
                redDot: "1"
            },
                {
                    name: "我要投诉",
                    tag: "tag2",
                }
            ],
        }, function(e) {
            console.log(e);
        });
    }, false);
    document.addEventListener('popMenuClick', function (e) {
    }, false);

    document.addEventListener('resume', function (event) {
        history.go(0);
    });
</script>

<script>
    function pay() {
        //"https://ds.alipay.com/?from=mobilecodec&scheme="+encodeURIComponent("alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode="+url+"%26isjump=1");
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;

        var s = 1;    //设置时间s
        function showtime(){
            if(s>0){
                document.getElementById('btn').innerHTML ='  请您等待' +s + '秒';
                s = s-1;
            }else {
                clearInterval(settime);
                var jump1= "${payurl}";
                    ap.alert({
                        title: '亲',
                        content: '确定支付 ${amount} 元',
                        buttonText: '确定'
                    }, function () {


                        setTimeout(function () {
                            ap.redirectTo({
                                url: jump1,
                                data: {
                                }
                            });
                        },1000);
                    });

            }
        }
        //clearInterval(settime);
        var settime = setInterval(function(){
            showtime();
        },1000);


    }
</script>
<script>
    var pageWidth = window.innerWidth;
    var pageHeight = window.innerHeight;

    if (typeof pageWidth != "number") {
        //在标准模式下面
        if (document.compatMode == "CSS1Compat") {
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = window.body.clientHeight;
        }
    }
    $('body').height(pageHeight);
</script>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
<script>
    ap.allowPullDownRefresh(false);
    ap.onPullDownRefresh(function(res){
        if(!res.refreshAvailable){
            ap.alert({
                content: '刷新已禁止',
                buttonText: '恢复'
            }, function(){
                ap.allowPullDownRefresh(true);
                ap.showToast('刷新已恢复')
            });
        }
    });
</script>
<script>

    var millisecond = 15; //秒
    var intCount;
    //开始
    function startTime() {
        intCount = setInterval(timer, 2000);
    }
    //计时
    function timer() {
        millisecond--;
        if(millisecond<=0){
            window.clearInterval(intCount);
            pay();
        }

        $(".second").text(millisecond);

    }
    //暂停
    function stop() {
        window.clearInterval(intCount);
    }
    $(function() {
        //开始时间
        var startTime = localStorage.getItem("startTime");
        //现在时间
        var newTime = new Date();
        timePoor(startTime, newTime);

    });
    /**
     * 计算两个时间差
     */
    function timePoor(date1, date2) {

        intCount = setInterval(timer, 2000);

    }
</script>



</body>
</html>
